<template>
    <div>
        <el-form class="searchForm" :model="searchForm" inline>
            <el-form-item>
                <el-button @click="openDialog('添加', 'add', null)" type="primary">添加</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            row-key="id"
            border
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
            :tree-props="{children: 'children'}"
        >
            <el-table-column label="楼号" prop="buildingId"></el-table-column>
            <el-table-column label="楼层" prop="storey"></el-table-column>
            <el-table-column label="寝室号" prop="dormId"></el-table-column>
            <el-table-column label="级别" prop="level">
                <template slot-scope="scope">
                        <el-tag>
                            {{ scope.row.level === "L1" ? "楼号" : "房间号" }}
                        </el-tag>
                        </template>
                </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="openDialog('编辑', 'edit', scope.row)" type="primary" size="mini">编辑</el-button>
                    <el-button @click="deleteData(scope.row)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            :before-close="handleClose"
            width="500"
        >
            <el-form
                ref="dialogForm"
                :rules="formRules"
                :model="dialogFormData"
                label-width="100px"
            >
                <el-form-item label="楼号" prop="buildingId">
                    <el-input
                        v-if="dialogFormData.level === 'L1'"
                        v-model="dialogFormData.buildingId">
                    </el-input>

                    <el-select
                        v-model="dialogFormData.buildingId"
                        v-if="dialogFormData.level === 'L2'"
                    >
                        <el-option
                            v-for="(item, index) in levelOptions"
                            :key="index"
                            :label="item.buildingId"
                            :value="item.buildingId"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-if="dialogFormData.level === 'L2'" label="楼层" prop="storey">
                    <el-input v-model="dialogFormData.storey"></el-input>
                </el-form-item>

                <el-form-item v-if="dialogFormData.level === 'L2'" label="寝室号" prop="dormId">
                    <el-input v-model="dialogFormData.dormId"></el-input>
                </el-form-item>

                <el-form-item label="级别" prop="level">
                    <el-select v-model="dialogFormData.level">
                        <el-option label="楼号" value="L1"></el-option>
                        <el-option label="房间号" value="L2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-if="dialogFormData.level === 'L2'" label="父目类" prop="id">
                    <el-select v-model="dialogFormData.id">
                        <el-option
                            v-for="(item, index) in levelOptions"
                            :key="index"
                            :label="item.buildingId"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <span slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm" type="primary">确定</el-button>
            </span>
        </el-dialog>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageIndex"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'dormitoryInfo',
    componentTitle: '宿舍信息',
    data () {
        return {
            dialogVisible: false,
            dialogTitle: '添加',
            dialogType: 'add',
            dialogFormData: {
                buildingId: '',
                storey: '',
                dormId: '',
                level: 'L2'
            },
            searchForm: {
                dormId: ''
            },
            tableData: [],
            pageInfo: {
                pageIndex: 1,
                pageSize: 10,
                total: 0
            },
            levelOptions: [],
            formRules: {
                buildingId: [
                    {required: true, message: '请输入楼号', trigger: 'change'}
                ],
                level: [
                    {required: true, message: '请选择级别', trigger: 'change'}
                ],
            }
        }
    },
    mounted () {
        this.getData()
        this.getLevelOptions()
    },
    methods: {
        getLevelOptions () {
            axios({
                url: 'http://127.0.0.1:3000/api/dormitory/l1',
                method: 'get'
            }).then(res => {
                console.log(res)
                this.levelOptions = res.data
            })
        },
        openDialog (title, type, row) {
            this.dialogVisible = true
            this.dialogType = type
            this.dialogTitle = title

            if (type === 'edit') {
                this.$nextTick(() => {
                    this.show = false
                    this.dialogFormData = Object.assign({}, row)
                })
            }
        },
        cancel () {
            this.dialogVisible = false
            this.$refs.dialogForm.resetFields()
        },
        confirm () {
            this.$refs.dialogForm.validate(valid => {
                if (valid) {
                    if (this.dialogType === 'add') {
                        this.addData()
                    } else if (this.dialogType === 'edit') {
                        this.editData()
                    }
                } else {
                    return false
                }
            })
        },
        addData () {
            axios({
                url: 'http://127.0.0.1:3000/api/dormitory/add',
                method: 'post',
                data: {
                    ...this.dialogFormData,
                    id: String(this.dialogFormData.level) === '1' ? 0 : this.dialogFormData.id
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.cancel()
                    this.$notify.success({title: '添加成功'})

                    this.getData()
                } else {
                    this.$notify.error({title: '添加失败'})
                }
            })
        },
        editData () {
            axios({
                url: 'http://127.0.0.1:3000/api/dormitory/update',
                method: 'put',
                data: {
                    ...this.dialogFormData,
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.cancel()
                    this.$notify.success({title: '编辑成功'})

                    this.getData()
                } else {
                    this.$notify.error({title: '编辑失败'})
                }
            })
        },
        deleteData (row) {
            this.$confirm('确定删除？').then(() => {
                axios({
                    url: 'http://127.0.0.1:3000/api/dormitory/delete',
                    method: 'delete',
                    params: row
                }).then(() => {
                    this.$notify.success({title: '删除成功'})

                    this.getData()
                })
            })
        },
        getData () {
            axios({
                url: 'http://127.0.0.1:3000/api/dormitory/list',
                method: 'get',
                params: {
                    pageIndex: this.pageInfo.pageIndex,
                    pageSize: this.pageInfo.pageSize,
                    ...this.searchForm
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.data.data
                this.pageInfo.total = res.data.total
            })
        },
        handleClose (done) {
            this.$confirm('确定关闭？').then(_ => {
                console.log(_)
                done()
                this.cancel()
            }).catch(_ => {
                console.log(_)
            })
        },
        // 每页多少条切换
        handleSizeChange(value) {
            this.pageInfo.pageSize = value;

            this.getData();
        },
        // 当前页码的切换
        handleCurrentChange(value) {
            this.pageInfo.pageIndex = value;

            this.getData();
        },
    }
}
</script>

<style lang="scss" scoped>
 .searchForm {
     display: flex;
     justify-content: end;
     margin-top: 10px;
     box-sizing: border-box;
 }
</style>